///*------------------------------------*\
//    #COLOR
//\*------------------------------------*/

// Color
.color {
    & > div {
        height: $base-spacing-unit * 6;
        padding: 0 $base-spacing-unit * 2;
        line-height: $base-spacing-unit * 6;
    }
}

    // Color: main
    .color__main {
        position: relative;
        height: 96px !important;
        margin-bottom: $base-spacing-unit;
        line-height: 1em !important;

        .color__variable {
            @include position(absolute, null null $base-spacing-unit * 2 $base-spacing-unit * 2);
        }
    }

    // Color: title
    .color__title {
        @include position(absolute, $base-spacing-unit * 2 null null $base-spacing-unit * 2);
        @include font-size(18px);
        font-weight: 500;
        color: $white;
    }

    // Color: variable
    .color__variable {
        @include font-size(14px);
        font-weight: 500;
        color: $white;
    }

    .color__variable--black {
        color: $black !important;
    }